<template>
    <div>
      <div style="position: absolute;top:10px;left:247px;right: 12px;height: 60px;border-radius: 4px;overflow: hidden;
       background-color: #fff;">
        <el-carousel trigger="click" :interval="9000" direction="vertical"  indicator-position="none" arrow="never" height="60px" style="width:100%" v-if="images.length">
          <el-carousel-item v-for="(image, index) in images" :key="index">
            <img :src="image.src + '?token=' + elm.info.token" height="100%"
                 style="width: 100%; object-fit: cover;" :title="image.title"
                 alt="图片丢失了" />
          </el-carousel-item>
        </el-carousel>
      </div>
        <el-container style="position: absolute; top: 0px; bottom: 0px; left: 0px; right: 0px; width: 100%; height: 100%;">
            <div class="el-title" style="padding-top:0px;padding-left:0px;font-size:18px;">
              <el-link href="/business/my/studio">
                <img src="./theme/images/logo.svg" style="height: 45px; margin-top:11px; line-height:45px;margin-left: -27px;" />
              </el-link>
            </div>
            <!-- 左侧菜单 -->
            <el-aside :style="asideStyle">
                <el-scrollbar class="left-menu-panel">
                    <el-menu ref="menu" :collapse="isCollapse" :default-active="active" :active="active" :collapse-transition="false">
                        <template v-for="(item, index) in menuDataFilter('')">
                            <template v-if="hasSub(item.id)">
                                <el-submenu :index="item.id" :key="index">
                                    <template slot="title">
                                        <template v-if="item.icon!=''">
                                            <li :class="item.icon"></li>
                                        </template>
                                        <span slot="title">{{item.name}}</span>
                                    </template>
                                    <!-- 二级循环  -->
                                    <template v-for="(subItem, subIndex) in menuDataFilter(item.id)">
                                        <template v-if="hasSub(subItem.id)">
                                            <el-submenu :index="subItem.id" :key="subIndex">
                                                <template slot="title">
                                                    <template v-if="subItem.icon!=''">
                                                        <li :class="subItem.icon"></li>
                                                    </template>
                                                    <span slot="title">{{subItem.name}}</span>
                                                </template>
                                                <!-- 三级循环 -->
                                                <template v-for="(sonItem, sonIndex) in menuDataFilter(subItem.id)">
                                                    <template v-if="hasSub(sonItem.id)">
                                                        <el-submenu :index="sonItem.id" :key="sonIndex">
                                                            <template slot="title">
                                                                <template v-if="sonItem.icon!=''">
                                                                    <li :class="sonItem.icon"></li>
                                                                </template>
                                                                <span slot="title">{{sonItem.name}}</span>
                                                            </template>
                                                            <!-- 四级循环 -->
                                                            <el-menu-item :id="'m'+sonSubItem.id" :index="sonSubItem.id" :key="sonSubIndex" v-for="(sonSubItem, sonSubIndex) in menuDataFilter(sonItem.id)" v-on:click="href(sonSubItem)">
                                                                <template v-if="sonSubItem.icon!=''">
                                                                    <li :class="sonSubItem.icon"></li>
                                                                </template><span slot="title">{{sonSubItem.name}}</span>
                                                            </el-menu-item>
                                                        </el-submenu>
                                                    </template>
                                                    <template v-else>
                                                        <el-menu-item :id="'m'+sonItem.id" :index="sonItem.id" :key="sonIndex" v-on:click="href(sonItem)">
                                                            <template v-if="sonItem.icon!=''">
                                                                <li :class="sonItem.icon"></li>
                                                            </template><span slot="title">{{sonItem.name}}</span>
                                                        </el-menu-item>
                                                    </template>
                                                </template>
                                            </el-submenu>
                                        </template>
                                        <template v-else>
                                            <el-menu-item :id="'m'+subItem.id" :index="subItem.id" :key="subIndex" v-on:click="href(subItem)">
                                                <template v-if="subItem.icon!=''">
                                                    <li :class="subItem.icon"></li>
                                                </template><span slot="title">{{subItem.name}}</span>
                                            </el-menu-item>
                                        </template>
                                    </template>
                                </el-submenu>
                            </template>
                            <template v-else>
                                <el-menu-item :id="'m'+item.id" :index="item.id" :key="index" v-on:click="href(item)">
                                    <template v-if="item.icon!=''">
                                        <li :class="item.icon"></li>
                                    </template><span slot="title">{{item.name}}</span>
                                </el-menu-item>
                            </template>
                        </template>
                    </el-menu>
                </el-scrollbar>
            </el-aside>
            <!-- 上部菜单 -->
            <el-container :style="containerStyle">
                <el-header style="padding-top:0px;height:12px;z-index:99;padding-right:30px;">
                    <div style="float:right;margin-right:-6px;margin-top:12px;">
                        <el-button type="text" size="mini" icon="el-icon-switch-button" @click="logout()"
                                   style="color:#666;font-size:14px;">退出</el-button>
                    </div>
                    <div style="float:right;margin-right:15px;margin-top:12px;;">
                        <el-button type="text" size="mini" icon="el-icon-edit-outline" @click="editPass()"
                                   style="color: #666; font-size: 14px;">修改密码</el-button>
                    </div>
                    <div style="float: right; margin-right: 15px; margin-top: 34px; line-height: 14px;" class="yhxx">
                        <el-dropdown trigger="click" style="cursor: pointer; color: #666"  @command="handleCommand">
                            <span class="el-dropdown-link">
                                {{info.user.name}}<i class="el-icon-arrow-down el-icon--right"></i>
                            </span>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item disabled style="color:#bbb !important;">单位</el-dropdown-item>
                                <el-dropdown-item disabled>
                                    {{info.org.name}}
                                </el-dropdown-item>
                                <el-dropdown-item disabled style="color:#bbb !important;" divided>岗位</el-dropdown-item>
                                <el-dropdown-item disabled v-for="item in info.role">{{item.name}}</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </div>
                    <div style="width:36px;height:36px;float:right;margin-right:2px;margin-top:20px;
                        border-radius:18px;overflow:hidden;border:1px solid transparent ;line-height:36px;position:relative;">
                        <img style="height:34px;width:34px;position:absolute;top:50%;margin-top:-17px;left:50%;margin-left:-17px;" src="./theme/images/user_face.png" />
                    </div>
                  <div style="width:20px;height:20px;float:right;margin-right:32px;margin-top:-1px;position:relative;cursor: pointer" @click="openai()" title="智能助手">
                    <img style="height:40px;width:40px;position:absolute;top:50%;margin-top:12.5px;left:53%;margin-left:-8px;" src="/res/jqr.gif" />
                  </div>
                </el-header>
                <div style="height:100%;position:relative;">
                    <el-main>
                        <div class="heng-head" style="z-index: 100;background-color: transparent!important;width: calc(100% - 400px)">
                            <div style="height:16px;background-color:#0176d5;width:3px;float:left;margin-top:21.5px;margin-left:10px;"></div>
                            <div style="float:left;margin-left:6px;margin-top: 12px">
                                <el-breadcrumb separator-class="el-icon-arrow-right"><el-breadcrumb-item v-for="item in menuText" style="line-height: 35px">{{item}}</el-breadcrumb-item></el-breadcrumb>
                            </div>
                            <div style="clear:both"></div>
                        </div>
                        <!-- 内容主体区域 -->
                        <div class="iframediv" :style="iframedivStyle">
                            <div class="global_main">
                              <div v-show="isChatOpen"
                                   class="draggable-box"
                                   :style="style"
                                   :class="chatBoxClass"
                                   @mousedown="startResize">
                                <div style="width: 100%;height: 35px;display: flex;align-items: center;background-color:#3a8ee6;">
                                  <div
                                      style="margin: 5px;width: calc(100% - 30px);font-family: 'Kaiti SC';font-size: 20px;color: #0077ff;color: white;">
                                    AI助手
                                  </div>
                                  <div class="el-icon-full-screen" v-if="chatBoxClass == 'chat-box-min'"
                                       style="justify-content:flex-end;margin-right: 10px;color: #EEEEEE;"
                                       @click="changeBoxClass('chat-box-max')"/>
                                  <div class="el-icon-copy-document" v-else
                                       style="justify-content:flex-end;margin-right: 10px;color: #EEEEEE;"
                                       @click="changeBoxClass('chat-box-min')"/>
                                  <div class="el-icon-close" src="@/assets/images/close.jpg"
                                       style="justify-content:flex-end;margin-right: 10px;color: #EEEEEE;"
                                       @click="isChatOpen = false"/>
                                </div>
                                <!--        <chat-box></chat-box>-->
                                <div>
                                  <iframe
                                      :src="'http://124.70.75.119:81/DcpAi?logo='+elm.info.tenant+'&token=132135461651132'"
                                      style="width: 100%; height: calc(90%); margin-top: 35px"
                                      frameborder="0"
                                      allow="microphone">
                                  </iframe>
                                </div>

                              </div>
                              <div v-if="elm.info.user.name == 'default'">
                                <init_name></init_name>
                              </div>
                              <main-area  ref="elmain">
                                    <router-view v-if="routerViewShow"></router-view>
                                </main-area>
                            </div>
                        </div>
                    </el-main>
                </div>
            </el-container>
        </el-container>
        <elm-dialog ref="dialog"></elm-dialog>
    </div>
</template>

<script>
    import mainArea from '@/system/main_area.vue'
    import { initDingH5RemoteDebug } from "dingtalk-h5-remote-debug";
    import Init_name from "../mob/system/init_name.vue";
    export default {
        extends: elmVueBase,
        components: {Init_name, mainArea ,initDingH5RemoteDebug},
        data() {
            return {
                menuData: elm.info.menu,
                isCollapse: false,
                active: null,
                topactive:null,
                menuText: [],
              isChatOpen: false,
              chatBoxClass: 'chat-box-min',
              isResizing: false,
              boxWidth: 800,
              startX: 0,
              startY: 0,
              aiToken:'',
              style: {width: '800px',zIndex:800},
                asideStyle: { width: "224px" },
                toggleStyle: { left: "224px" },
                iframedivStyle: { top: "64px" },
                containerStyle: { marginLeft: "0px" },
                iconName: "el-icon-s-fold",
                topItem: {},
                tid: null,
                info: { org: elm.info.org, user: elm.info.user, role: elm.info.role, system: elm.settings.systemName},
                routerViewShow: false,
              images: [],
            }
        },
        async created() {
          debugger
         // elm.info.user= {name:"default"}
          if (elm.info.user.name == 'default') {
            return
          }
          await this.getImg();
          await this.getToken();
            var mod = null;
            for (var i = 0; i < this.menuData.length; i++) {
                if (this.$router.currentRoute.meta.id == this.menuData[i].id) {
                    mod = this.menuData[i];
                    break;
                }
            }
            if (mod != null) {
                for (var i = 0; i < this.menuData.length; i++) {
                    if (this.menuData[i].id == mod.pid) {
                        this.topItem = this.menuData[i];
                        break;
                    }
                }
                if (this.topItem == {}) {
                    this.topItem = mod;
                }
            }
            else {
              for (var i = 0; i < this.menuData.length; i++) {
                if (this.menuData[i].pid == '0' || this.menuData[i].pid == null || this.menuData[i].pid == '') {
                  this.topItem = this.menuData[i];
                  break;
                }
              }
              for (var i = 0; i < this.menuData.length; i++) {
                if (this.menuData[i].pid == this.topItem.id ) {
                  mod= this.menuData[i];
                  break;
                }
              }
              if(mod==null)
              {
                for (var i = 0; i < this.menuData.length; i++) {
                  if (this.menuData[i].id == this.topItem.id ) {
                    mod= this.menuData[i];
                    break;
                  }
                }
              }
            }
            this.routerViewShow = true;
            this.$nextTick(()=>{
              if(this.topItem.id!=undefined && this.topItem.id!=mod.id){
                this.$refs.menu.open(this.topItem.id);
              }
              if(mod.target!="blank") {
                this.topItemClick(this.topItem, mod);
              }
            })
            elm.main.vue = this;
        },
        mounted() {
            elm.main.area = this.$refs["elmain"];
          initDingH5RemoteDebug();
        },
        methods: {
          async getToken() {
            let res = await elm.post('/system/login/ai/getToken');
            this.aiToken =res;
            console.log('aitoken', this.aiToken)
          },
          startResize(event) {
            this.isResizing = true;
            this.startX = event.clientX;
            document.addEventListener('mousemove', this.doResize);
            document.addEventListener('mouseup', this.stopResize);
          },
          doResize(event) {
            if (this.isResizing) {
              this.boxWidth -= event.clientX - this.startX;
              this.startX = event.clientX
              this.$set(this.style, 'width', this.boxWidth + 'px');
            }
          },
          stopResize() {
            this.isResizing = false;
            document.removeEventListener('mousemove', this.doResize);
            document.removeEventListener('mouseup', this.stopResize);
          },
          changeBoxClass(name) {
            if (name == 'chat-box-max') {
              this.style.width = 'calc(100% - 200px)';
            } else {
              this.style.width = '800px';
            }
            this.chatBoxClass = name;
          },
          async getImg(){
            var res= await elm.post('/business/my/GetImgData',{});
            var minNum=5;
            if(res.length<minNum)
              minNum=res.length;
            for(var i=0;i<minNum;i++)
            {
              this.images[i]=res[i];
              this.images[i].src="/api/system/login/io/Viewer/biz_cms_news_files/"+res[i].id;
            }
          },
          openai()
          {
           this.isChatOpen = true;
          },
          handleCommand(command)
          {
            if(command=="open_ei")
            {
            }
          },
            async logout() {
                let res = await elm.post('/system/login/Logout');
                if(res.status=="success")
                {
                  //记录日志
                  let oper_log = {};
                  oper_log.oper_type = "0"; //PC
                  oper_log.nick_name = elm.info.user.name;
                  oper_log.menu_title = "/system/login/Logout";
                  oper_log.oper_time = new Date().toLocaleString();
                  oper_log.msg = "退出";
                  await elm.post('/system/login/log/Upsert', oper_log);
                  elm.info.token =null;
                  elm.info.system =null;
                  elm.info.menu =null;
                  elm.info.user =null;
                  elm.info.org =null;
                  elm.info.role =null;
                  this.v("你已退出登录")
                  setTimeout(()=>{
                    top.location.href = elm.settings.routefix+elm.settings.loginPath;
                  }, 1000);
                }

            },
            menuDataFilter(pid) {
                var filterdata = [];
                for (var i = 0; i < this.menuData.length; i++) {
                    if (this.menuData[i].pid == pid) {
                        filterdata.push(this.menuData[i]);
                    }
                    else if (pid == "0" || pid == null || pid == "") {
                        if (this.menuData[i].pid == null || this.menuData[i].pid == "0" || this.menuData[i].pid == "") {
                            filterdata.push(this.menuData[i]);
                        }
                    }
                }
                return filterdata;
            },
            hasSub(id) {
                for (var i = 0; i < this.menuData.length; i++) {
                    if (this.menuData[i].pid == id) {
                        return true;
                    }
                }
                return false;
            },
            href(item) {
              //记录日志
              let oper_log = {};
              oper_log.oper_type = "0"; //PC
              oper_log.nick_name = elm.info.user.name;
              oper_log.menu_title = item.navigateurl;
              oper_log.oper_time = new Date().toLocaleString();
              oper_log.msg = item.name;
              elm.post('/system/login/log/Upsert', oper_log);
                if (item.target == "blank") {
                    window.open(item.navigateurl);
                    return;
                }
                function menuText(item,_this) {
                    for (var i = 0; i < _this.menuData.length; i++) {
                        if (_this.menuData[i].id == item.pid) {
                            _this.menuText.unshift(_this.menuData[i].name);
                            menuText(_this.menuData[i], _this);
                        }
                    }
                }
                this.menuText = [];
                this.menuText.push(item.name);
                menuText(item,this);
                this.tid = item.id;
                this.$nextTick(() => {
                    document.querySelectorAll(".el-aside .is-active").forEach((c) => {
                        c.classList.remove("is-active");
                    });
                    document.querySelectorAll("#m" + this.tid ).forEach((c) => {
                        c.classList.add("is-active");
                    });
                    if (this.$router.currentRoute.meta.id != this.tid) {
                        this.$router.push({ path: item.navigateurl });
                    }
                });
            },
            topItemClick(item,mod) {
                this.topItem = item;
                this.topactive = "t" + item.id;
                if (mod != null) {
                    this.href(mod);
                }
            },
            editPass() {
                elm.dialog.open(this, elm.settings.routefix+"/system/pass_eidt", "修改密码", 500, 400, {});
            }
        }
    
    };
</script>
<style>
@import url('theme/main.css');
</style>
<style scoped>

.chat-box-min {
  position: fixed;
  right: 1px;
  width: 500px;
  height: calc(100% - 5%);
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  z-index: 1000; /* 确保聊天框在最上层 */
  cursor: move;
  touch-action: none;
}

.chat-box-max {
  position: fixed;
  right: 1px;
  width: calc(100% );
  height: calc(100% );
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  z-index: 1000; /* 确保聊天框在最上层 */
}
    .iframediv {
        border-radius: 4px;
        margin-left: 12px;
        margin-right: 12px;
        margin-top: 7px;
        margin-bottom: 12px;
    }
    .global_main {
        border-radius: 6px;
        overflow: auto;
        margin-bottom: 10px;
    }
    .el-aside {
        margin-top: 83px;
        padding-top: 0px;
        border-radius: 4px;
        border-top-left-radius: 0px;
        border-top-right-radius: 0px;
        margin-bottom: 12px;
        margin-left: 11px;
    }
    .left-menu-panel {
        height: 100%;
        background-color: rgb(255,255,255);
    }
    .el-aside .el-menu-item {
       color: #505968;
    }
    .el-title {
      background-color: rgb(255, 255, 255);
      width: 224px;
      height: 72px;
      border-radius: 4px;
      border-bottom-left-radius: 0px;
      border-bottom-right-radius: 0px;
      margin-left: 11px;
      margin-top: 11px;
      color: rgb(0, 104, 253);
    }
    .el-dropdown-menu .el-dropdown-menu__item
    {
      line-height: 30px !important;
      height: 30px !important;
      color: #606266 !important;
      font-size: 14px !important;
      padding: 0 20px !important;
      cursor: pointer !important;
    }
    .el-dropdown-menu__item--divided:before {
      height: 0px !important;
    }

    .el-dropdown-menu__item.is-disabled {
      cursor: default;
      color: #bbb;
      pointer-events: none;
    }
</style>